<template>
  <div>
    <p v-if='isReadOnlyPage === true'>{{normalizedValue}}</p>
    <a-input v-else @click="alertModal" :placeholder="placeholder" :value="normalizedValue" @change="onchange" />
    <cascader-modal title="城市" :visible="cascaderVisible" @close="confirms" @confirm="showCasader" :dataFn="getCityCitys" :single="true" v-model="cascaderData" :checkedDisable="checkedDisable"></cascader-modal>
  </div>
</template>

<script>
import CascaderModal from '@/components/formComponents/CascaderModal/CascaderModal'
import { getCityCitys } from '@/api/config.js'
export default {
  components: { CascaderModal },
  name: 'Location',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'checkedDisable', 'placeholder'],
  data () {
    return {
      cascaderVisible: false,
      cascaderData: [],
      getCityCitys
    }
  },
  computed: {
    normalizedValue () {
      // console.log('Location before normalized: ', this.value && this.value.name)
      if (this.value) {
        // console.log('Location normalized: ', this.value.name)
        return this.value.name
      }
      return ''
    }
  },
  methods: {
    onchange (val) {
      console.log('Location input: ', val)
    },
    alertModal () {
      this.cascaderVisible = true
    },
    // 确定
    showCasader (data) {
      this.cascaderVisible = false
      // console.log('Location: ', JSON.stringify(data))
      // this.$emit('col_cityArr', data)
      this.$emit('change', data[0])
      this.$emit('ckeckedKeys', 'city')
    },
    // 取消
    confirms () {
      this.cascaderVisible = false
    }
  }
}
</script>
